<template>
  <view>
    <view class="search-type">
      <view @click="selectModel">
        <text :class="{ active: showParamDetail }">{{
          model.brand_name ? model.brand_name : "选择车型"
        }}</text>
        <image
          v-if="showParamDetail"
          src="/static/downArrow-selected2.png"
          mode="scaleToFill"
        />
        <image v-else src="/static/downArrorw-black.png" mode="scaleToFill" />
      </view>
    </view>
    <view
      class="screenBoxOverlay"
      v-if="showParamDetail"
      @click="showParamDetail = false"
    >
      <view
        class="screenBoxPopup"
        :style="{ marginTop: '50rpx' }"
        @tap.stop="showParamDetail = true"
      >
        <view class="brand-list">
          <view
            class="brand-item"
            v-for="(item, index) in models"
            :key="index"
            @tap.stop="setModels(item)"
          >
            <view
              class="brand-item_name"
              :class="{ active: brand_id == item.brand_id }"
              >{{ item.brand_name }}
            </view>
            <!-- <view class="brand-item_num">{{ item.num }}条</view> -->
          </view>
        </view>
      </view>
    </view>
    <view v-if="ISNoData" class="empty">
      <image src="@/static/empty.png"></image>
    </view>
    <scroll-view
      v-else
      scroll-y="true"
      class="scroll-view-class"
      :style="'height:' + scroll_height + ''"
      :scroll-top="scrollTop"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="lower"
    >
      <view class="car-list">
        <view
          class="car-item"
          v-for="(item, index) in carList"
          :key="index"
          @click="carDetail(item)"
        >
          <view class="car-name">{{ item.cars_name }}</view>
          <view class="car-tag">
            <text v-for="(v, i) in item.label" :key="i">{{ v }}</text>
          </view>
          <view class="baojia">
            <text class="price">我的报价:{{ item.price }}万</text>
            <text class="guide_price">指导价:{{ item.guide_price }}万</text>
          </view>
          <view class="car-price">
            <text>报价时间：{{ item.time }}</text>
            <text>已有{{ item.quotation_number }}人报价</text>
          </view>
          <view class="car-bot">
            <view class="bjz" v-if="item.cars_search_status === 1">
              <text>报价中</text>
              <view>
                <view @click.stop="cancelQuote(item)">取消报价</view>
                <view @click.stop="editQuote(item)">修改报价</view>
              </view>
            </view>
            <text class="cancel" v-if="item.cars_search_status === 2"
              >已取消发布</text
            >
            <text class="cancel" v-if="item.cars_search_status === 3"
              >已取消报价</text
            >
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  newsCarsSearchQuotationList,
  newsCarSearchQuotationCancel,
  brandCarsSeriesSearch,
} from "../../../../api/newCarSerach.js";
export default {
  data() {
    return {
      users_id: uni.getStorageSync("login").id,
      carList: [],
      offsetTop: uni.getSystemInfoSync().statusBarHeight + 44 || 44,
      scroll_height: "100vh",
      isRefresher: false, //下拉刷新状态
      page: 1, //第几页数据
      page_num: 8,
      last_page: 0, //总页数
      isShowMore: false, //上拉加载没有数据时展示控制
      ISNoData: false, //无数据时图片展示控制
      scrollTop: 0,

      isEnd: false,
      triggered: false,
      isfreshing: false,

      brand_id: "",
      series_two_id: "",

      showParamDetail: false,
      models: [],
      model: {},
    };
  },
  mounted() {
    this.getCarList();
    brandCarsSeriesSearch(this.users_id).then((res) => {
      this.models = res.data;
    });
  },
  methods: {
    getCarList() {
      const that = this;
      newsCarsSearchQuotationList(
        this.page,
        this.page_num,
        this.users_id,
        this.brand_id,
        this.series_two_id
      ).then((res) => {
        that.$nextTick(() => {
          if (that.page == 1) {
            that.carList = [];
            that.carList = res.data.data;
            that.triggered = false;
            that.isfreshing = false;
          } else {
            for (var i = 0; i < res.data.data.length; i++) {
              that.carList.push(res.data.data[i]);
            }
            that.isEnd = false;
          }
          that.last_page = res.data.last_page;
          if (that.carList.length <= 0) {
            that.ISNoData = true;
          } else {
            that.ISNoData = false;
          }
          that.$forceUpdate();
          if (that.last_page == that.page) {
            that.isShowMore = true;
          } else {
            that.isShowMore = false;
          }
        });
      });
    },

    onRefresh() {
      if (!this.triggered) {
        if (this.isfreshing) return;
        this.isfreshing = true;
        if (!this.triggered) {
          this.triggered = true;
        }
        this.page = 1;
        this.getCarList();
      }
    },

    lower() {
      if (!this.isShowMore) {
        if (!this.isEnd) {
          this.isEnd = true;
          if (this.page < this.last_page) {
            this.page = this.page + 1;
            this.getCarList();
          } else {
            uni.showToast({
              title: "没有数据了",
              icon: "none",
            });
            this.getCarList();
          }
        }
      }
      if (this.isShowMore) {
        var that = this;
        setTimeout(() => {
          that.isShowMore = false;
        }, 2000);
      }
    },
    backData() {
      this.page = 1;
      this.getCarList();
    },
    // 取消报价
    cancelQuote(item) {
      const that = this;
      uni.showModal({
        title: "温馨提示",
        content: "您确认取消报价？",
        confirmText: "确定",
        confirmColor: "#0E59EA",
        cancelText: "取消",
        cancelColor: "#333333",
        success: function (res) {
          if (res.confirm) {
            newsCarSearchQuotationCancel({
              id: item.id,
              users_id: that.users_id,
            }).then((res) => {
              if (res.code == 0) {
                uni.showToast({
                  title: "取消成功",
                  icon: "none",
                  duration: 500,
                });
                setTimeout(() => {
                  that.page = 1;
                  that.getCarList();
                }, 500);
              }
            });
          }
        },
      });
    },
    // 修改报价
    editQuote(item) {
      uni.navigateTo({
        url: `/pages/home/newCarSearch/myQuotes/editQuote?quotationId=${item.id}&cars_name=${item.cars_name}&source_type_name=${item.source_type_name}&guide_price=${item.guide_price}&carId=${item.car_search_id}&model_two_id=${item.model_two_id}`,
      });
    },
    // 详情
    carDetail(item) {
      uni.navigateTo({
        url: `/pages/home/newCarSearch/myQuotes/searchCarDetail?carId=${item.car_search_id}`,
      });
    },
    //
    selectModel() {
      this.showParamDetail = !this.showParamDetail;
    },
    setModels(item) {
      this.model = item;
      this.brand_id = item.brand_id;
      this.showParamDetail = false;
      this.page = 1;
      this.getCarList();
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000;
}
.search-type {
  display: flex;
  height: 60rpx;
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  view {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      &.active {
        color: #2d56c5;
      }
    }
    image {
      width: 16rpx;
      height: 10rpx;
      margin-left: 12rpx;
    }
  }
}
.scroll-view-class {
  padding-top: 70rpx;
  padding-bottom: 40rpx;
  font-family: PingFang SC;
}
.car-list {
  height: inherit;
  color: #000000;
  padding: 20rpx 28rpx 200rpx;
  .car-item {
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 14rpx;
    padding: 29rpx 19rpx;
    &:first-child {
      margin-top: 0;
    }
    .car-name {
      font-size: 28rpx;
      font-weight: 800;
    }
    .car-tag {
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;
      margin: 15rpx 0;
      text {
        margin-right: 15rpx;
      }
    }
    .baojia {
      .price {
        font-size: 32rpx;
        font-weight: 800;
        color: #ec4b4b;
      }
      .guide_price {
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
        margin-left: 30rpx;
      }
    }
    .car-price {
      margin-top: 25rpx;
      margin-bottom: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .car-bot {
      border-top: 1rpx solid #e6e6e6;
      padding-top: 20rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #666666;
      text.cancel {
        color: #666666;
      }
      text.have {
        color: #ec4b4b;
      }
    }
  }
}
.release-car {
  width: 100%;
  height: 162rpx;
  background: #ffffff;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  view {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    background: #0e59ea;
    border-radius: 14rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }
}
.empty {
  display: flex;
  justify-content: center;
  image {
    margin-top: 360rpx;
  }
}
.bjz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text {
    color: #ec4b4b;
  }
  > view {
    display: flex;
    gap: 20rpx;
    align-items: center;
    view {
      width: 150rpx;
      height: 50rpx;
      line-height: 46rpx;
      background: #ffffff;
      border: 1px solid #999999;
      border-radius: 25rpx;
      text-align: center;
    }
  }
}

.screenBoxOverlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.2);

  .screenBoxPopup {
    padding-top: 9px;
    max-height: calc(100vh - 260px);
    overflow: auto;
    background: #ffffff;
    border-radius: 0rpx 0rpx 14rpx 14rpx;

    .brand-list {
      padding: 0 28rpx;
      box-sizing: border-box;

      .brand-item {
        padding: 30rpx 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f2f2f2;
        .brand-item_name {
          font-size: 28rpx;
          color: #000000;
          &.active {
            color: #2d56c5;
          }
        }
      }

      .brand-item:last-child {
        border: none;
      }
    }

    .wgns {
      padding: 28rpx;
      box-sizing: border-box;

      &_item {
        margin-bottom: 49rpx;

        &_name {
          font-size: 30rpx;
          font-weight: 800;
          color: #000000;
          margin-bottom: 30rpx;
        }

        &_list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          &_item {
            padding: 18rpx 31rpx;
            box-sizing: border-box;
            background: #f7f8fa;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #000000;
            margin: 0 16rpx 20rpx 0;
          }

          &_active {
            background: #0e59ea;
            color: #ffffff;
          }
        }
      }

      &_bottom {
        display: flex;
        justify-content: space-between;

        &_btn {
          width: 274rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          background: #f2f2f2;
          border-radius: 14rpx;
          font-size: 28rpx;
          color: #000000;
        }

        &_confirm {
          width: 400rpx;
          color: #ffffff;
          background: #0e59ea;
        }
      }
    }

    .area {
      display: flex;

      &_left {
        height: calc(100vh - 270px);
        padding: 0 28rpx;
        box-sizing: border-box;
        width: 204rpx;
      }

      &_right {
        height: calc(100vh - 270px);
        padding: 0 28rpx;
        box-sizing: border-box;
        width: calc(100% - 204rpx);
        border-left: 1rpx solid #f2f2f2;
        // box-shadow: -5px 0px 16rpx rgba(0, 0, 0, 0.1);
      }

      &_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 85rpx;
      }

      &_name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
    }
  }
}
</style>
